import React, { Component, PureComponent } from 'react'
import TestComponent from "./components/TestComponent"
import request from "./untils/request"
import "./api/index"


class App extends PureComponent {
  state = {
    isFinite: false,
    testName: "123",
    myList:[]
  }
  componentDidMount() {//组件挂载后
    console.log(this.refs.testBox);
    request.get("/api/list").then(res => {
      console.log(res.data.list);
      this.setState({myList:res.data.list})
    })
  }
  componentDidUpdata() {//更新
    console.log(666);
  }
  compontwillUmount() {//卸载
  }
  // shouldComponentUpdate(nextProps:any,nextState:any) {
  //   console.log(nextProps,"nextProps");
  //   console.log(nextState, "nextState");
  //   if (nextState.isFinite) {
  //     return true//触发
  //   } else {
  //     return false//不重新触发render
  //   }
  // }
  render() {//渲染函数，渲染dom以及挂载一些事件
    const { isFinite, myList } = this.state
    const testClick = () => {
      this.setState({
        isFinite: true
      })
    }
    console.log(111);
    return (
      <div ref="testBox">
        <ul>
          {
            isFinite?<TestComponent></TestComponent>:null
          }
          {
            myList && myList.map((item: any, index) => {
              return (<li key={index}>{item.title}</li>)
            })
          }
     
        </ul>
      </div>
    )
  }
}

export default App